<template>
  <div id="#app">
    <div class="title">
      <h3>纸张令重换算器</h3>
    </div>
    <!-- 主内容 -->
    <div class="main">
      <div class="list">
        <div class="list_left">纸张克重</div>
        <div class="list_right">
          <input type="number" class="list_inpt" v-model="gramWeight" />
          <span class="right_text">克/平米</span>
        </div>
      </div>

      <div class="list">
        <div class="list_left">纸张尺寸</div>
        <div class="list_right">
          <div v-if="!isManual">
            <select
              v-model="selectClassEnd"
              @change="selectClass($event)"
              class="selectItem"
            >
              <option
                v-for="items in selectClassData"
                :key="items.id"
                :value="items.data"
                selected="items.data[0]"
              >
                {{ items.data }}
              </option>
            </select>
            <span class="mm2">㎜²</span>
          </div>

          <div v-else class="ManualInner">
            <input type="number" class="list_inpt2" v-model="firstSize" />
            <span>×</span>
            <input type="number" class="list_inpt2" v-model="lastSize" />
            <span class="mm2">㎜²</span>
          </div>

          <!-- 切换手动输入勾选框 -->
          <div class="CheckManual">
            <input type="checkbox" v-model="isManual" />输入尺寸
          </div>
        </div>
      </div>

      <div class="list">
        <div class="list_left">纸张吨价</div>
        <div class="list_right">
          <input type="number" class="list_inpt" v-model="tonPrice" />
          <span>元/吨</span>
        </div>
      </div>

      <!-- 只读数据 -->
      <div class="list">
        <div class="list_left">标准令重</div>
        <div class="list_right">
          <span class="textInner">{{ standardWeight }}</span>
          <span>千克/令</span>
        </div>
      </div>

      <div class="list">
        <div class="list_left">折算令数</div>
        <div class="list_right">
          <span class="textInner">{{ Conversion }}</span>
          <span>令/吨</span>
        </div>
      </div>

      <div class="list">
        <div class="list_left">纸张令价</div>
        <div class="list_right">
          <span class="textInner">{{ orderPrice }}</span>
          <span>元/令</span>
        </div>
      </div>

      <div class="list">
        <div class="list_left">纸张单价</div>
        <div class="list_right">
          <span class="textInner">{{ unitPriceFix }}</span>
          <span>元/张</span>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="btns">
      <van-button type="primary" size="normal" class="btn1" @click="Reset"
        >清空</van-button
      >
      <van-button type="warning" size="normal" class="btn2" @click="init"
        >初始化数据</van-button
      >
    </div>
    <!-- bgi -->
    <div class="bgi">
      <!-- <img src="../bgi/bgi.jpg" alt="" /> -->
      <img class="bottomBgi" src="../bgi/logoNew.jpg" alt="">
      <img class="bottomBgi" src="../bgi/WeChat.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      gramWeight: 60, //克重
      tonPrice: 8000, //纸张吨价
      isManual: false, //直接输入勾选
      selectClassEnd: "787×1092", //默认选择的数据
      select_data: "", //选中的数据
      firstSize: 787, //纸张尺寸第一个数据
      lastSize: 1092, //纸张尺寸第二个数据

      selectClassData: [
        //类别选择数据或者从后台获取数据
        { id: 1, data: "787×1092" },
        { id: 2, data: "787×1094" },
        { id: 3, data: "850×1188" },
        { id: 4, data: "889×1194" },
        { id: 5, data: "880×1230" },
        { id: 6, data: "890×1240" },
        { id: 7, data: "900×1280" },
        { id: 8, data: "1000×1400" },
        { id: 9, data: "787×1140" },
        { id: 10, data: "787×960" },
        { id: 11, data: "890×1280" },
        { id: 12, data: "800×1100" },
      ],
    };
  },
  methods: {
    //数据选择
    selectClass(event) {
      this.select_data = event.target.value; //获取option对应的value值
      this.getNumData(this.select_data);
    },
    //str数据转num数据
    getNumData(strNub) {
      let length = strNub.length;
      let strIndex = strNub.indexOf("×");
      this.firstSize = parseInt(strNub.slice(0, strIndex));
      this.lastSize = parseInt(strNub.slice(strIndex + 1, length));
      console.log(this.firstSize, this.lastSize);
    },

    //重置按钮
    Reset() {
      this.gramWeight = null;
      this.selectClassEnd = null;
      this.tonPrice = null;
      this.firstSize = NaN;
      this.lastSize = NaN;
    },
    //初始化数据按钮
    init() {
      this.gramWeight = 60;
      this.tonPrice = 8000;
      this.isManual = false;
      this.selectClassEnd = "787×1092";
      this.getNumData(this.selectClassEnd);
    },
  },
  computed: {
    /* 尺寸乘积 */
    nubProduct() {
      return (this.firstSize / 1000) * (this.lastSize / 1000);
    },

    /* 标准令重 */
    standardWeight() {
      return ((this.nubProduct * this.gramWeight * 500) / 1000).toFixed(4);
    },

    /* 折算令数 */
    Conversion() {
      return (2000 / this.nubProduct / this.gramWeight).toFixed(4);
    },

    /* 纸张令价 */
    orderPrice() {
      return (this.unitPriceNoFix * 500).toFixed(4);
    },

    /* 纸张单价(保留小数) */
    unitPriceFix() {
      return (
        (this.nubProduct * this.gramWeight * this.tonPrice) /
        1000000
      ).toFixed(4);
    },

    /* 纸张单价(不保留小数) */
    unitPriceNoFix() {
      return (this.nubProduct * this.gramWeight * this.tonPrice) / 1000000;
    },
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.title {
  height: 45px;
  line-height: 45px;
  background-color: #1e90ff;
  h3 {
    height: 100%;
    text-align: center;
    margin: 0;
    color: #f1f2f6;
  }
}
.main {
  margin: 30px 0;
}
.list {
  padding: 12px 16px;
  display: flex;
  vertical-align: bottom;
  margin: 8px 0;
  .list_left {
    font-size: 18px;
    width: 100px;
  }
  .list_right {
    font-size: 18px;
    display: flex;
    span {
      margin-left: 5px;
    }
    .textInner {
      color: #ff7979;
      font-weight: 700;
    }
    .list_inpt {
      font-weight: 700;
      box-sizing: border-box;
      display: inline-block;
      width: 80px;
      height: 35px;
      text-align: center;
      position: relative;
      bottom: 5px;
    }
    .selectItem {
      width: 125px;
      height: 24px;
      font-size: 18px;
      font-weight: 700;
      position: relative;
      bottom: 5px;
      height: 36px;
      text-align: center;
    }
    .list_inpt2 {
      font-weight: 700;
      position: relative;
      bottom: 5px;
      font-size: 18px;
      height: 32px;
      text-align: center;
    }
    .mm2 {
      position: relative;
      bottom: 5px;
    }
  }
  .list_left,
  .list_right {
    height: 24px;
    line-height: 24px;
  }
}
.CheckManual {
  position: relative;
  top: 2px;
  font-size: 16px;
  line-height: 24px;
  margin-left: 20px;
}
.ManualInner {
  input {
    width: 50px;
    height: 20px;
  }
  span {
    margin: 0 1px !important;
    position: relative;
    bottom: 5px;
  }
}
.btns {
  display: flex;
  .btn1,
  .btn2 {
    flex: 1;
  }
  .van-button {
    border-radius: 5px;
    width: 150px;
  }
}
.bgi {
  margin-top: 20px;
  height: 180px;
  display: flex;
  /* img {
    width: 100%;
    height: 100%;
  } */
  .bottomBgi {
    width: 50%;
    flex: 1;
  }
}
</style>
